<template>
    <div class="article2">
      <!-- 评论 -->
        <ul class="comm-ul comm-top" ref="commtop">
        <li>
          <van-image
            width="40px"
            height="40px"
            fit="cover"
            round
            :src="item.info.avatar"
          />
        </li>
        <li>
          <span>{{ item.info.nickname }}</span>
           <p v-html="item.content"></p>
          <!-- 评论的回复 -->
          <span>{{ format(item.create_time, "yyyy-MM-dd HH:mm:ss")}}</span>
        </li>
        <li>
          <svg
            @click.stop="comments(item.is_like,item._id,item)"
            class="tt-icon"
            aria-hidden="true">
            <use
              :class="item.is_like ? 'islike' : ''"
              xlink:href="#icon-dianzan"
            ></use>
          </svg>
          {{ item.like_count }}
        </li>
      </ul>
      <!-- 二级评论 -->
      <h1 ref="jcpl">精彩评论</h1>
      <ul class="comm-ul" v-for="(item, index) in evaluate" :key="item._id" >
        <li>
          <van-image
            width="40px"
            height="40px"
            fit="cover"
            round
            :src="item.info.avatar"
          />
        </li>
        <li>
          <span>{{ item.info.nickname }}</span>
           <p v-html="item.content"></p>
          <!-- 评论的回复 -->
          <span>{{ format(item.create_time, "yyyy-MM-dd HH:mm:ss")}}</span>
        </li>
        <li>
          <svg
            @click.stop="comments(item.is_like, item._id, evaluate[index])"
            class="tt-icon"
            aria-hidden="true"
          >
            <use
              :class="evaluate[index].is_like ? 'islike' : ''"
              xlink:href="#icon-dianzan"
            ></use>
          </svg>
          {{ evaluate[index].like_count }}
        </li>
      </ul>
      <!-- 二级评论回复 -->
      <div class="content">
        <div class="comment">
          <ul>
            <li>
              <input type="text" v-model="comment" placeholder="请输入评论" @keyup.enter="getcomment(1)" />
            </li>
            <li>
              <button @click="getcomment(1)">回复</button>
            </li>
            <li>
              <svg
              @click.stop="comments(item.is_like,item._id,item)"
              class="tt-icon"
              aria-hidden="true">
              <use
                :class="item.is_like ? 'islike' : ''"
                xlink:href="#icon-dianzan"
              ></use>
            </svg>
            </li>
            <li>
              <svg class="tt-icon" aria-hidden="true">
                <use xlink:href="#icon-zhuanfa"></use>
              </svg>
            </li>
          </ul>
          
        </div>
        <div class="comment2"></div>
      </div>
    </div>
</template>

<script>
import { format } from "date-fns";
import { Image as VanImage } from "vant";
import { ActionSheet } from "vant";
import methods from '@/views/article/mixin.js'
export default {
    name: 'articleon',
    components:{
        [VanImage.name]: VanImage,
        [ActionSheet.name]: ActionSheet,
    },
    data() {
        return {
            format,
            comment:'',
            show:false
        };
    },
    props:['evaluate','item','article_id'],
    mounted(){
      
    },
    created(){
      
    },
    computed:{
    },
    beforeUpdate(){
      this.datt=this.$refs.commtop.clientHeight
      const jcpl=this.$refs.jcpl
      jcpl.style.paddingTop=this.datt+20+'px'
    },
    methods: {
      ...methods,
    },
};
</script>

<style lang="scss" scoped>
.article2{
  height: 100%;
}
.commtop{
  height: 100%;
}
.comm-ul {
  padding: 3vw 4vw;
    display: flex;
    li:nth-child(1) {
      width: 50px;
      img {
        width: 100%;
      }
    }
      li:nth-child(2) {
        padding-left: 3px;
        span {
          padding: 0 5px;
          em {
            border: 1px solid #ccc;
            padding: 5px;
            border-radius: 36px;
            margin-right: 10px;
          }
        }
        span:nth-child(1) {
          font-size: 17px;
          font-weight: 700;
          color: #222;
        }
        span:nth-child(4){
          padding-left: 30px;
          display: inline-block;
        }
        p {
          font-size: 21px;
          margin: 5px 0;
          padding: 3px 3px;
        }
        flex: 1;
      }
      li {
        button {
          border-radius: 36px;
          background-color: #fff;
          border: 1px solid #ccc;
          padding: 5px;
        }
      }
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
}
// .comm-ul:nth-last-child(2){
//   padding-bottom: 24vw;
// }
h1{
  padding: 0 15px;
  margin-bottom: 4.5vw;
  font-size: 18px;
  font-weight: 600;
}
.comm-top{
  margin-bottom: 30px;
  display: flex;
  width: 92%;
  background-color: #fff;
  position: fixed;
  z-index: 3;
}
.islike {
  color: red;
}
// 二级评论回复
.comment {
  height: 45px;
  position: absolute;
  position: fixed;
  bottom: 0;
  border: 1px solid pink;
  width: 100%;
  background-color: #fff;
  ul {
    display: flex;
    li:nth-child(1) {
      input {
        width: 60vw;
        height: 10vw;
        border: none;
        padding-left: 30px;
        padding-top: 1vw;
      }
      width: 60vw;
    }
    li {
      width: 13vw;
      .tt-icon {
        font-size: 23px;
        margin-top: 3.4vw;
        margin-left: 10px;
      }
      button {
        padding: 4px;
        font-size: 14px;
        color: #444;
        margin-top: 9px;
        border-radius: 11px;
        margin-right: 4px;
        border: 1px solid #ccc;
        background-color: #fff;
      }
    }
  }
}
.comment2{
  height: 100px;
}
</style>